﻿<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">编辑引擎 <kbd class="pull-right">Xeditable</kbd></h1>
</div>
<div class="wrapper-md">
	<div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">编辑控件</div>
        <div class="panel-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-3 control-label">文本框:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-text="user.name">{{ user.name || '空' }}</a>
                </p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">下拉框:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
                		{{ showStatus(user) }}
                	</a>
                </p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">文本域:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-textarea="user.desc" e-rows="7">
								    {{ user.desc || 'no description' }}
								  </a>
                </p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">复选框:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-checkbox="user.remember" e-title="记住我?">
					    {{ user.remember && "记住我" || "不要记住我" }}
					</a>
                </p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">单选框组:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-radiolist="user.agenda" e-ng-options="s.value as s.text for s in agenda">
								    {{ showAgenda() }}
								  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          编辑表单
        </div>
        <div class="panel-body">
          <form editable-form name="editableForm" onaftersave="saveUser()">
            <div class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-3 control-label">姓名:</label>
                <div class="col-sm-9">
                  <p class="form-control-static">
                    <span editable-text="user.name">{{ user.name || 'empty' }}</span>
                  </p>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">状态:</label>
                <div class="col-sm-9">
                  <p class="form-control-static">
                    <span editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
                      {{ showStatus(user) }}
                    </span>
                  </p>
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                  <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
                    编辑
                  </button>
                  <!-- buttons to submit / cancel form -->
                  <span ng-show="editableForm.$visible">
                    <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
                      保存
                    </button>
                    <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
                      取消
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">Html5 编辑框</div>
        <div class="panel-body">
          <div>
            <div class="m-b">邮箱: <a editable-email="html5.email">{{ html5.email || '空' }}</a></div>
            <div class="m-b">手机: <a editable-tel="html5.tel" e-pattern="1\d{10}" e-title="1xxxxxxxxxx">{{ html5.tel || '空' }}</a></div>
            <div class="m-b">数字: <a editable-number="html5.number" e-min="18">{{ html5.number || '空' }}</a></div>  
            <div class="m-b">滑块: <a editable-range="html5.range" e-step="5">{{ html5.range || '空' }}</a></div>  
            <div class="m-b">网址: <a editable-url="html5.url">{{ html5.url || '空' }}</a></div>  
            <div class="m-b">搜索: <a editable-search="html5.search">{{ html5.search || '空' }}</a></div>  
            <div class="m-b">颜色: <a editable-color="html5.color">{{ html5.color || '空' }}</a></div>  
            <div class="m-b">日期: <a editable-date="html5.date">{{ html5.date || '空' }}</a></div>  
            <div class="m-b">时间: <a editable-time="html5.time">{{ html5.time || '空' }}</a></div>  
            <div class="m-b">日期时间: <a editable-datetime="html5.datetime">{{ html5.datetime || '空' }}</a></div>  
            <div class="m-b">月份: <a editable-month="html5.month">{{ html5.month || '空' }}</a></div>  
            <div class="m-b">周: <a editable-week="html5.week">{{ html5.week || '空' }}</a></div>  
          </div>
            <p>
                注：html5 编辑框，需要浏览器较好的支持 html5 才能正常工作。
            </p>
        </div>
      </div>
    </div>
  </div>
	
</div>
